import { Row, Col, Button } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { type } from "@testing-library/user-event/dist/type";

const btnProps = {
  type: "primary",
  shape: "round",
  style: {
    width: "100%",
    background: "linear-gradient(90deg, #6253e1 15%, #04befe)",
  },
};

const ButtonList = ({ list, grid = 3 }) => {
  return (
    <Row gutter={[24, 16]} style={{ margin: "15px 0px 0" }}>
      {list.map((item) => (
        <Col span={24 / grid} key={item.name}>
          <Button {...btnProps} icon={item.icon}>
            {item.name}
          </Button>
        </Col>
      ))}
      <Col span={24 / grid}>
        <Button {...btnProps} icon={<PlusOutlined />} />
      </Col>
    </Row>
  );
};

export default ButtonList;
